<template>
	<view class="addAddressOuter">
		<!-- 收货人 -->
		<view class="userOuter">
			<view class="user">
				<view>收货人</view>
				<input type="text" v-model="addressInfo.user" placeholder="请填写收货人姓名">
			</view>
		</view>

		<!-- 手机号 -->
		<view class="phoneOuter">
			<view class="user">
				<view>手机号</view>
				<input type="number" v-model="addressInfo.phone" placeholder="请填写收货人手机号">
			</view>
		</view>

		<!-- 省市区 -->
		<view class="ssqOuter">
			<view class="ssq">
				<text>省市区</text>
				<view class="selectSsq">
					<picker mode="multiSelector" @cancel="pickerBtn" @columnchange="bindMultiPickerColumnChange"
						:value="multiIndex" :range="multiArray" @change="pickerChange">
						<view style="background-color: white;" v-if="ssqFlag">
							{{ multiArray[0][multiIndex[0]] }}，
							{{ multiArray[1][multiIndex[1]] }}，
							{{ multiArray[2][multiIndex[2]] }}
						</view>
						<view class="ssqItem" v-else @click="ssqFlag = true">
							<text>请选择省市区</text>
							<image src="../../static/images/iconImg/xjt.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<!-- 详细地址 -->
		<view class="detailAddressOuter">
			<view class="user">
				<view>详细地址</view>
				<input type="text" v-model="addressInfo.detailAddress" placeholder="请填写收货详细地址">
			</view>
		</view>

		<!-- 设为默认 -->
		<view class="setDefault">
			<radio-group>
				<label>设为默认：</label>
				<radio :checked="addressInfo.isDefault" @click="setDefault" />
			</radio-group>
		</view>

		<view class="footer" @click="saveAddress">
			保存
		</view>
	</view>
</template>

<script>
	import {
		serviceApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				addressInfo: {
					user: '',
					phone: '',
					detailAddress: '',
					isDefault: false,
					area_id: 0
				},
				ssqFlag: false,
				ssqData: [],
				multiArray: [
					['全部'],
					['全部'],
					['全部']
				],
				multiIndex: [0, 0, 0],
				diyilie: 0,
				dierlie: 0,

			}
		},
		onShow() {
			this.getSsq()
		},
		methods: {
			// 获取省市区
			async getSsq() {
				const {
					data: res
				} = await serviceApi({
					method: "user.getarealist"
				})
				this.ssqData = res.data

				// 省
				const province = []
				res.data.forEach(item => {
					province.push(item.label);
				})
				this.multiArray[0] = province

				// 市
				const city = []
				res.data[0].children.forEach(item => {
					city.push(item.label)
				})
				this.multiArray[1] = city

				// 区
				const region = []
				res.data[0].children[0].children.forEach(item => {
					region.push(item.label)
				})
				this.multiArray[2] = region

				this.addressInfo.area_id = this.ssqData[this.multiIndex[0]].children[this.multiIndex[1]].children[this
					.multiIndex[2]].value

			},

			// 联级选择器
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case e.detail.value:
								this.diyilie = e.detail.value
								const city = []
								this.ssqData[e.detail.value].children.forEach(item => {
									city.push(item.label)
								})
								this.multiArray[1] = city;
								const region = []
								this.ssqData[e.detail.value].children[0].children.forEach(item => {
									region.push(item.label)
								})
								this.multiArray[2] = region;
								break;
						}
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						break;
					case 1: //拖动第2列
						this.dierlie = e.detail.value

						switch (this.multiIndex[0]) { // 判断第一列
							case this.diyilie:
								switch (this.multiIndex[1]) { // 判断第二列
									case this.dierlie:
										const region = []
										this.ssqData[this.diyilie].children[this.dierlie].children.forEach(item => {
											region.push(item.label)
										})
										this.multiArray[2] = region;
										break;
								}
								break;
						}
						this.multiIndex.splice(2, 1, 0);
						break;
				}
				this.$forceUpdate();
				this.addressInfo.area_id = this.ssqData[this.multiIndex[0]].children[this.multiIndex[1]].children[this
					.multiIndex[2]].value
			},

			// 默认
			setDefault() {
				this.addressInfo.isDefault = !this.addressInfo.isDefault
			},

			// 保存地址
			async saveAddress() {
				const data = {
					address: this.addressInfo.detailAddress,
					area_id: this.addressInfo.area_id,
					is_def: this.addressInfo.isDefault === true ? 1 : 2,
					method: "user.editship",
					mobile: this.addressInfo.phone,
					name: this.addressInfo.user,
					token: uni.getStorageSync('token'),
				}

				const {
					data: res
				} = await serviceApi(data)

				uni.showToast({
					icon: 'success',
					title: '保存成功',
					duration: 1000
				})

				uni.navigateTo({
					url: '/pages/address/address'
				})
			},

			pickerBtn() {
				this.ssqFlag = false
			},

			// 保存省市区
			async pickerChange(e) {
				const {
					data: res
				} = await serviceApi({
					city_name: this.multiArray[1][this.multiIndex[1]],
					county_name: this.multiArray[2][
						this.multiIndex[2]
					],
					method: "user.getareaid",
					province_name: this.multiArray[0][this.multiIndex[0]],
				})

			},
		},
		/* {
			address: "就发生大家看法立刻决定是否"
			area_id: 110101
			is_def: 2
			method: "user.editship"
			mobile: "13698756423"
			name: "聪聪"
			token: "aab1513731c7a1866ede6340b8d5196b"
		} */
	}
</script>

<style lang="scss" scoped>
	$H: 93.4vh;

	input {
		font-size: 12px;
		padding: 6px;
		width: 200px;
	}

	.addAddressOuter {
		height: $H;
		background-color: #f8f8f8;
		font-size: 13px;

		.detailAddressOuter,
		.phoneOuter,
		.userOuter {
			background-color: #fff;
			padding: 5px 5px 5px 10px;

			.user {
				width: 90%;
				display: flex;
				align-items: center;
				padding-bottom: 10px;
				border-bottom: 1px solid #e3e3e3;

				input {
					margin-left: 20px;
				}
			}
		}

		.ssqOuter {
			background-color: #fff;
			padding: 5px 0 5px 10px;
		}

		.ssq {
			width: 90%;
			padding-bottom: 10px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e3e3e3;
			padding-bottom: 10px;

			text {
				margin-right: 30px;
			}

			.ssqItem {
				display: flex;
				align-items: center;
				color: #5e5e5e;

				image {
					margin-left: 140px;
					width: 10px;
					height: 12px;
				}
			}
		}

		.setDefault {
			background-color: #fff;
			padding: 5px 10px 10px 10px;

			radio-group {
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.footer {
			height: 36px;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #333333;
			color: #fff;
			text-align: center;
			line-height: 36px;
		}

		.popoverOuter {
			position: absolute;
			background-color: rgba(0, 0, 0, .3);
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;

			.popover {
				height: 266px;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #fff;

				.popover_top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10px 30px 10px 30px;

					text {
						&:first-child {
							color: #7f7f7f;
						}

						&:last-child {
							color: #ff4747;
						}
					}
				}
			}
		}

	}
</style>